移动端

只是一个文档总结，纯粹是喜欢SF的Markdown。

---

HTML

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

CSS

• X轴上采用百分比
• 字体大小以及部分不能用百分比衡量者，采用REM单位

JS

配置页面根font-size大小   

(function ( doc, win ) {
    var win = window;
    var doc = win.document;
    var baseWidth = 640;
    var documentHTML = doc.documentElement;
    function setRootFont(){
    var docWidth = documentHTML.getBoundingClientRect().width;
    var scale = docWidth / baseWidth;
    if (docWidth > 640) {
    scale = 1;
    }
    var p = scale*100;
    documentHTML.style.fontSize = p + 'px';
    }
    setRootFont();
    win.addEventListener('resize', setRootFont, false);
})( document, window );

---

表单

• 表单之 - 各个浏览器自带的样式

  • 这个问题不仅是手机端还有PC端，张鑫旭大神有详解

• 表单之 - 输入框的光标大小

  • 解决： 注意排查line-height值，不要使用line-height垂直居中，用上下同padding值

• 表单之 - 去掉input和select的默认样式

  /* input和select的默认样式取消 */
  input,select{
      outline: transparent dotted;border: 0;background: #fff;
      -webkit-appearance : none;
      -moz-appearance: none;
      -o-appearance: none;
      appearance: none;
  }
  
  /* input的placeholder修改，至于select下的option的字体颜色可以直接控制select的color属性 */
  input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
      color: #ccc;font-size: 13px;
  }
  input:-moz-placeholder,textarea:-moz-placeholder {
      color: #ccc;font-size: 13px;
  }
  input::-moz-placeholder,textarea::-moz-placeholder {
      color: #ccc;font-size: 13px;
  }
  input:-ms-input-placeholder,textarea:-ms-input-placeholder {
      color: #ccc;font-size: 13px;
  }

• 表单之 - 重写按钮的样式

  • CODEPEN

• 表单之 - iOS机型点击输入框页面会放大

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     
  

  width - viewport的宽度 height - viewport的高度
  initial-scale - 初始的缩放比例
  minimum-scale - 允许用户缩放到的最小比例
  maximum-scale - 允许用户缩放到的最大比例
  user-scalable - 用户是否可以手动缩放

滚动条

• 修改样式

  &::-webkit-scrollbar {
    width: 4px
  }
  &::-webkit-scrollbar-track {
    border-radius: 4px
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .1);
    border-radius: 6px
  }

• 隐藏滚动条但是依然可以滚动

  &::-webkit-scrollbar {
    display:none
  }

  但是上述仅用于 webkit 浏览器，其他浏览器见过一种思路是：在原有的 div外部套一层div，样式内写overflow：hidden; 使这个外部的div宽度小于内部出滚动条的div.内部div的样式为overflow-y:auto;overflow-x:hidden;。这样，内部div的滚动条就被隐藏起来了，但是，此时依然可以滚动。纯css，div隐藏滚动条，保留鼠标滚动效果。

iOS

• iOS中弹性拉伸的现象

  • 解决：禁用那个层或者body的touchstart事件的默认行为

    // disabled touchstart event
    document.addEventListener('touchstart',function(event){
        event.preventDefault();
    }, false);

• iOS禁用音视频自动播放

  • 这个是苹果官方明确提出的，为了用户的利益。此处的iOS涵盖了（iPhone和iPad）

  • 解决：这个其实不能根本上解决问题，只能借用微信环境下，微信的 js-sdk 来实现自动播放。所以iOS的Safari浏览器依然是死角，不能做到自动播放。

      wx.ready(() => {
        document.getElementById('audio').play();
      })

  • 追加：遇见 touchstart 和 touchend 事件，在 touchstart 时触发音频 a，在 touchend 时触发音频 b，但是如果长按时间过长，会出现 b 不播放或者播放延迟的现象。原因是，音频资源没加载完成。

      // 预设 this 环境
      function preload() {
        wx.ready(() => {
          wx.getNetworkType({
            success: () => {
              this.a = new Audio('a.mp3');
              this.b = new Audio('b.mp3');
              this.a.loop = true;
              this.a.load();
              this.b.load();
            }
          });
        });
      }
      
      // touchstart and touchend
      function start() {
        this.a.play();
      }
      function end() {
        this.a.pause();
        this.b.play();
      }

• iOS中DOM的onclick事件无效

  • 解决：在该DOM上css上添加{cursor: pointer}

个例

• Chrome浏览器默认最小字体是12px

  • 解决：使用适配手机的缩放。（ transform: scale(...) translate(...) ）
  • CODEPEN DEMO

• Safari无痕模式下不支持sessionStorage.setItem()

  • 解决一：业务场景可使用全局变量处理
  • 解决二：Safari Private browsing mode appears to support localStorage, but doesn't

学习资料

• 使用Flexible实现手淘H5页面的终端适配
• 前端页面布局常见问题/已踩过的坑大杂烩

---

——好记性不如烂笔头